
document.addEventListener('DOMContentLoaded', ()=>{
  z('.zp-colors-globalcssfile').innerHTML = hljs.highlight(`<link rel="stylesheet" href="http://zx4.com:8001/kits/css/zpcode.min.css">`,{language: 'xml'}).value;
  z('.zp-colors-custom').innerHTML = hljs.highlight(`--content: #333; //内容色
--content-grey: #999; //灰内容色
--primary: rgb(22, 113, 216); //主色
--second: #1fbdff; //次主色
--primary-light: rgba(22, 113, 216, 0.1); //浅主色
--second-light: #39c4ff10; //浅次主色
--primary-dark: rgb(30, 63, 100); //暗主色
--second-dark: #19526b10; //暗次主色
--error: rgb(216, 22, 71); //错误色
--error-light: rgba(216, 22, 71, 0.1); //浅错误色
--error-dark: rgb(85, 34, 47); //暗错误色
--warning: rgb(255, 174, 0); //警告色
--warning-light: rgba(255, 174, 0, 0.15); //浅警告色
--warning-dark: rgb(97, 85, 42); //暗警告色
--info: rgb(22, 113, 216); //提示色
--info-light: rgba(22, 113, 216, 0.1); //浅提示色
--info-dark: rgb(39, 65, 95); //暗提示色
--success: rgb(15, 179, 89); //成功色
--success-light: rgba(15, 179, 89, 0.1); //浅成功色
--success-dark: rgb(46, 80, 61); //暗成功色
--gold: rgba(240, 214, 141, 1); //金色
--gold-gradient: linear-gradient(90deg, rgba(240, 214, 141, 1) 0%, rgba(224, 191, 115, 1) 100%); //渐变金色
--grey: #eee; //灰色，一般用于边框颜色
--grey-d: #ddd; //次灰色，一般用于边框颜色
--grey-f5: #f5f5f5; //浅灰色，一般用于背景色
--grey-f9: #f9f9f9; //次浅灰色，一般用于背景色
--grey-fa: #fafafa; //超浅灰色，一般用于背景色
--white: #fff; //白色
--white-10: rgba(255,255,255,0.1); //白色-10%透明度
--white-15: rgba(255,255,255,0.15); //白色-15%透明度
--white-20: rgba(255,255,255,0.2); //白色-20%透明度
--white-30: rgba(255,255,255,0.3); //白色-30%透明度
--white-40: rgba(255,255,255,0.4); //白色-40%透明度
--white-60: rgba(255,255,255,0.6); //白色-60%透明度
--white-80: rgba(255,255,255,0.8); //白色-80%透明度
--black: #000; //黑色
--black-10: rgba(0,0,0,0.1); //黑色-10%透明度
--black-15: rgba(0,0,0,0.15); //黑色-15%透明度
--black-20: rgba(0,0,0,0.2); //黑色-20%透明度
--black-30: rgba(0,0,0,0.3); //黑色-30%透明度
--black-40: rgba(0,0,0,0.4); //黑色-40%透明度
--black-60: rgba(0,0,0,0.6); //黑色-60%透明度
--black-80: rgba(0,0,0,0.8); //黑色-80%透明度

--font: "Noto Sans SC",Noto Sans,-apple-system,BlinkMacSystemFont; //字体
--baseFontSize: 14px; //字体大小`,
    {language: 'css'}
  ).value;

  z('.zp-colors-rewrite').innerHTML = hljs.highlight(`// custom.css
:root{
  --content-grey: #34495e; //灰内容色
  --primary: #4dceff; //主色
  --second: #ff7ee3; //次主色
}`, {language: 'javascript'}).value;

  z('.zp-colors-inner').innerHTML = hljs.highlight(`<zp-button color="second" style="--zp-second:pink">自定义颜色</zp-button>`,{language: 'xml'}).value;
});
